<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustom('CaseShareShow',~{::style})">
		<style type="text/css">
			.main{
				font-size: 0.12rem;
				padding: 0.2rem;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
			}
			.cl{

			}
			.tilte{
				font-size: 0.28rem;
				font-weight: normal;
			}
			.createMsg{
				color: #bcbcbc;
				padding: 0.2rem 0;
			}
			.createMsg span{
				font-size: 0.14rem;
				font-weight: 100;
				padding-right: 0.2rem;
			}
			.createMsg span img{
				width: 0.2rem;
				display: inline-block;
				vertical-align: text-bottom;
				padding-right: 0.05rem;
			}
			.subtitle,.subtitle2{
				font-size: 0.16rem;
				padding: 0.02rem 0.1rem;
				margin: 0.1rem 0;
				font-weight: normal;
				border-left: 0.04rem solid #ccc;
				color: #666;
				font-weight:bold;
				/*font:16px/2 Tahoma,Verdana,"Microsoft Yahei";*/
				border-left: 0.04rem solid #1d9be5;
			}
			/*.subtitle2{*/

			/*}*/
			.mainTable{
				margin-bottom: 0.5rem;
			}
			.mainTable ul{
				width: 100%;
				height: auto;
				overflow: hidden;
				font-size: 0;
				border-bottom: none;
				border-left: 1px solid #cdcdcd;
			}
			.mainTable ul:nth-of-type(1){
				border-top: 1px solid #cdcdcd;
			}
			.mainTable ul li{
				width: 33.3%;
				display: inline-block;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				border: 1px solid #cdcdcd;
				border-left: none;
				border-top: none;
			}
			.mainTable ul li:nth-last-of-type(1){
				border-right: 1px solid #cdcdcd;
			}
			.mainTable ul li span{
				height: 0.4rem;
				text-align: center;
				line-height: 0.4rem;
				display: inline-block;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				font-size: 0.13rem;
				vertical-align: text-bottom;
			}
			.mainTable ul li .tdtype1{
				width: 1.3rem;
				background: #f2f3f3;
			}
			.mainTable ul li .tdtype2{
				width: calc(100% - 1.3rem);
			}
			.mainTable ul li:nth-of-type(3) .tdtype2{
				border:none;	
			}
			.textMsg{
				font-size: 0.13rem;
				padding: 0rem 0.14rem;
				line-height: 0.25rem;
				font-weight: 100;
				color: #666;
				letter-spacing: 0.01rem;
				margin-bottom: 48px;
				font:16px/2 Tahoma,Verdana,"Microsoft Yahei";
    			letter-spacing: 0.5px;
			}
			.textMsg label{
				    background: #fff;
					border: 1px solid #cdcdcd;
					color: #333;
					font-weight: 500;
					margin-right: 10px;
					border-radius: 3px;
					padding: 0 0.15rem;
					display: inline-block;
					margin-bottom: 0.05rem;
					cursor: pointer;
					line-height: 25px;
					background: #2dcc70;
					color: #fff;
					border: 1px solid #2dcc70;
			}
			.thumbsUpDiv{
				text-align: center;
				margin: 0.3rem 0;
			}
			.thumbsUp{
				padding: 0.05rem 0.35rem;
				background: none;
				border: 1px solid #1d9be5;
				border-radius: 0.04rem;
				color: #1d9be5;
				cursor: pointer;
				display: inline-block;
			}
			.thumbsUpAct{
				background: #1d9be5;
				border: 1px solid #1d9be5;
				color: #fff;
			}
			.thumbsUpUserArr{
				padding: 0.24rem;
			}
			.userStyle{
				display: inline-block;
				background: #89b1f7;
				border-radius: 0.05rem;
				padding: 0.05rem 0.1rem;
				color: #fff;
				margin-right: 0.05rem;
				margin-bottom: 0.05rem;
			}
			.itemtime{
				font-size: 0.12rem;
				color: #aaa;
				float: right;
			}
			.itemtext{
				border-bottom: 1px solid #eee;
				padding: 0.2rem 0.14rem;
				margin-bottom: 0.2rem;
			}
			.textArea{
				position:relative;
				font-size: 0.12rem;
				margin-top: 0.1rem;
				margin-bottom: 0.3rem;
			}
			.textArea textarea{
			    width: 100%;
			    height: 1.3rem;
			    resize: none;
			    padding: 0.1rem;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				border-radius: 0.05rem;
				color: #333;
			}
			.textArea .sendEdit{
				position:absolute;
				bottom: 0.1rem;
				right: 0.1rem;
				cursor: pointer;
				border: none;
				background: #1d9be5;
				color: #fff;
				padding: 0.05rem 0.25rem;
				border-radius: 0.04rem;
			}

			.heart {
				background: url(../../static/img/web_heart_animation/web_heart_animation.png);
				background-position: left;
				background-repeat: no-repeat;
				height: 100px;
				width: 100px;
				cursor: pointer;
				background-size:2900%;
				position: absolute;
    			right: 50%;
   			}
			.heart:hover, .heart:focus{
			   background-position: right;
			}
		 	.likeCount{
				font-family: 'Georgia', Times, Times New Roman, serif;
				font-size: 25px;
				color: #999999;
				height: 100px;
				line-height: 100px;
			}

			@-webkit-keyframes heartBlast {
			0% {
				background-position: left;
			}
			100% {
				background-position: right;
			}
		   }
		@keyframes heartBlast {
			 0% {
				 background-position: left;
			 }
			 100% {
				  background-position: right;
			  }
		}
		.heartAnimation {
			  display: inline-block;
			 -webkit-animation-name: heartBlast;
			  animation-name: heartBlast;
			  -webkit-animation-duration: .8s;
			  animation-duration: .8s;
			  -webkit-animation-iteration-count: 1;
			  animation-iteration-count: 1;
			  -webkit-animation-timing-function: steps(28);//共28个背景图片帧
			  animation-timing-function: steps(28);
			  background-position: right;
		}
		</style>
	</head>
	<body>
		<div class="main">
			<h2 th:text="${caseShareManage.title}" class="tilte"></h2>
			<p class="createMsg">
				<span>
					<img src=""/>
					<span th:text="${caseShareManage.addUserName}"></span>
				</span>
				<span>
					<img src=""/>
					<span th:text="${#dates.format(caseShareManage.updateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
				</span>
				<span>
					<img src=""/>
					<span id="pageViews" th:text="${caseShareManage.pageViews}"></span>
				</span>
			</p>
			<h3 class="subtitle">学员基本信息</h3>
			<div class="mainTable">
				<ul>
					<li>
						<span class="tdtype1">分类</span>
						<span th:text="${caseShareManage.typeName}" class="tdtype2"></span>
					</li>
					<li>
						<span class="tdtype1">学员姓名</span>
						<span th:text="${caseShareManage.cnName}" class="tdtype2"></span>
					</li>
					<li>
						<span class="tdtype1">学员性别</span>
						<span th:text="${caseShareManage.sex==1?'男':'女'}" class="tdtype2"></span>
					</li>
				</ul>
				<ul>
					<li>
						<span class="tdtype1">学员年龄</span>
						<span class="tdtype2" th:text="${caseShareManage.age}"></span>
					</li>
					<li>
						<span class="tdtype1">学员年级</span>
						<span class="tdtype2" th:text="${caseShareManage.gradeName}"></span>
					</li>
					<li>
						<span class="tdtype1">学员学校</span>
						<span class="tdtype2" th:text="${caseShareManage.school}"></span>
					</li>
				</ul>
				<ul>
					<li>
						<span class="tdtype1">套餐类型</span>
						<span class="tdtype2" th:text="${caseShareManage.packageName}"></span>
					</li>
				</ul>
			</div>
			<h3 class="subtitle">标签</h3>
			<p class="textMsg">
				<label class="Titlelabel cl" th:each="list:${labelList}" th:text="${list.name}"></label>
			</p>
			<h3 class="subtitle">家庭情况</h3>
			<p class="textMsg" th:text="${caseShareManage.familyInformation}"></p>
			<h3 class="subtitle">学习困难</h3>
			<p class="textMsg" th:text="${caseShareManage.learningDifficulty}"></p>
			<h3 class="subtitle">学员Case分享</h3>
			<p class="textMsg" th:text="${caseShareManage.caseShare}"></p>
			<h3 class="subtitle">收获</h3>
			<p class="textMsg" th:text="${caseShareManage.gain}"></p>
			<h3  class="subtitle" >注意</h3>
			<p th:if="${!#strings.isEmpty(caseShareManage.attention)}" class="textMsg" th:text="${caseShareManage.attention}"></p>
			<p th:if="${#strings.isEmpty(caseShareManage.attention)}" class="textMsg" style="text-align:left">主人很懒，没有填写注意</p>
			<div class="thumbsUpDiv">
				<!-- 开始-->
				<div class="feed" id="feed2">
					<div class="heart" id="like2" rel="like"></div>
					<div class="likeCount" id="likeCount2" th:attr="data-caseShareId=${caseShareManage.id}" th:text="${caseShareManage.pointCount}"></div>
				</div>
				<!--结束-->
			</div>
			<h3 class="subtitle2">谁点赞？</h3>
			<div class="thumbsUpUserArr" th:id="thumbsUpUser">

			</div>
			<h3 class="subtitle2">评论</h3>
			<div class="editItem">
				<div class="textArea">
					<textarea id="comment" maxlength="200" placeholder="写些什么？"></textarea>
					<button class="sendEdit" id="sendEdit">发送</button>
					<div style="position: absolute;bottom: 0.1rem;right: 0.9rem;color: #ccc;font-size: 0.12rem;"><span th:class="textCount" value="">0</span><span value="">/200</span></div>
				</div>
				<div id="commentList">

				</div>
				<div style="margin-left:50%;">
					<div style="margin-top:-5%;display: none" id="loading">
						<img src="../../static/img/web_heart_animation/loading.gif">
					</div>
					<span stye="disply:none" id="bottomText"></span>
				</div>
			</div>
            <input id="pageNum" type="hidden">
		</div>
<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
	<script>
		var load = false;
		var bottomTextShow = false;
		var post_flag = false;
		$(document).ready(function() {
			//访问量+1 请求
			addPageViews();
			//判断是否点赞
			isThumbsUp();
			//点赞列表初始化
			thumbsUpList();
			//评论列表
			commentList(1);
             //鼠标向下滚动加载下一页数据，或者移动端向下滑动加载下一页数据
            $(window).scroll(function () {
                //$(window).scrollTop()这个方法是当前滚动条滚动的距离
                //$(window).height()获取当前窗体的高度
                //$(document).height()获取当前文档的高度
                var bot = 30; //bot是底部距离的高度
                if ((bot + $(window).scrollTop()) >= ($(window).height() - $("#commentList").height())) {
                    console.info(load);
                   //当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时；
                    //我们需要去异步加载数据了
                     if(load==false) {
                        load=true;
                        var page = $("#pageNum").val();
                        commentList(page);
                    }
                }
            });
		});

			//点赞  or 取消点赞
			$('.heart').click(function(){
			    //如果正在提交则直接返回，停止执行
				if(post_flag) {
				    return;
                }
				//标记当前状态为正在提交状态
				post_flag = true;
				var A=$(this).attr("id");
				var B=A.split("like");
				var messageID=B[1];
				var C=parseInt($("#likeCount"+messageID).html());
				var D=$(this).attr("rel");//如果为Like则执行动画
				//判断是点赞还是取消点赞
				var type = "";
				if(D =='like'){
					type = "yes";//点赞
				}else{
					type = "no";//取消点赞
				}
				//点赞请求
				$.ajax({
					 type : "POST", //提交方式
					 url : "/caseShareManage/thumbsUp",//路径
					 data :{
						"caseShareId" : $("#likeCount2").attr("data-caseShareId"),
						 "type" : type
					 },
					 //数据，这里使用的是Json格式进行传输JSON.stringify(data),
					 dataType:"json",
					 //contentType: "application/x-www-form-urlencoded",
					 success: function (data) {
						if(data.code > 0){
							if(D =='like'){
								$("#likeCount"+messageID).html(C+1);
								$(".heart").addClass("heartAnimation").attr("rel","unlike");
								$(".heart").css("background-position","right");
								//不加这句有bug，动画最后又会到了起点，点击后强制使图片停在最右边

							}else{
								$("#likeCount"+messageID).html(C-1);
								$(".heart").removeClass("heartAnimation").attr("rel","like");
								$(".heart").css("background-position","left");
								//点击后强制使红心变黑，否则显示悬停状态的红色的心
							}
							thumbsUpList();
						}else{
							layer.msg(data.msg);
						}
					},
					error: function (err) {
						console.log(err);
					}
				})
			});

	//动态获取点赞列表
	function thumbsUpList(){
	    //console.info("调用点赞列表");
		$.ajax({
			 type : "POST", //提交方式
			 url : "/caseShareManage/thumbsUpList",//路径
			 data :{
				"caseShareId" : $("#likeCount2").attr("data-caseShareId")
			 },
			 //数据，这里使用的是Json格式进行传输JSON.stringify(data),
			 dataType:"json",
			 //contentType: "application/x-www-form-urlencoded",
			 success: function (data) {
				if(data.code > 0){
					var thumbsUpList = data.thumbsUpList;
					if(thumbsUpList != null && thumbsUpList.length>0){
						var html = "";
						for(var i = 0;i<thumbsUpList.length;i++){
							html+='<span class="userStyle">'+thumbsUpList[i].addUserName+'</span>';
						}
						$("#thumbsUpUser").html(html);
					}else{
					  $("#thumbsUpUser").html("");
					}
					 post_flag =false; //在提交成功之后将标志标记为可提交状态
				}
			},
			error: function (err) {
				console.log(err);
			}
		})
	}
	//访问量+1 请求
	function addPageViews(){
		$.ajax({
			 type : "POST", //提交方式
			 url : "/caseShareManage/addpageViews",//路径
			 data :{
				"caseShareId" : $("#likeCount2").attr("data-caseShareId")
			 },
			 //数据，这里使用的是Json格式进行传输JSON.stringify(data),
			 dataType:"json",
			 //contentType: "application/x-www-form-urlencoded",
			 success: function (data) {
				if(data.code > 0){
					$("#pageViews").text(parseInt($("#pageViews").text())+1);
				}else{
					layer.msg(data.msg);
				}
			},
			error: function (err) {
				console.log(err);
			}
		});
	}

	//是否点赞
	function isThumbsUp(){
			$.ajax({
			 type : "POST", //提交方式
			 url : "/caseShareManage/isThumbsUp",//路径
			 data :{
				"caseShareId" : $("#likeCount2").attr("data-caseShareId")
			 },
			 //数据，这里使用的是Json格式进行传输JSON.stringify(data),
			 dataType:"json",
			 //contentType: "application/x-www-form-urlencoded",
			 success: function (data) {
				if(data.code > 0){
				    console.info("是否点赞："+data.isThumbsUp);
					if(data.isThumbsUp>0){
					    $(".heart").addClass("heartAnimation").attr("rel","unlike");
						$(".heart").css("background-position","right");
					}else{

					}
				}
			},
			error: function (err) {
				console.log(err);
			}
		})
	}

	//添加评论
	$("#sendEdit").click(function(){
	    var comment = $("#comment").val();
	    if(comment == null || comment ==""){
	        layer.msg("评论内容不能为空");
	        return;
		}
		if(comment.length>200){
	         layer.msg("评论内容不能超过200字");
	         return;
		}
		$.ajax({
			 type : "POST", //提交方式
			 url : "/caseShareManage/addComment",//路径
			 data :{
				"caseShareId" : $("#likeCount2").attr("data-caseShareId"),
				 "comment" : $("#comment").val()
			 },
			 //数据，这里使用的是Json格式进行传输JSON.stringify(data),
			 dataType:"json",
			 //contentType: "application/x-www-form-urlencoded",
			 success: function (data) {
				if(data.code > 0){
				   layer.msg(data.msg);
				   $("#comment").val("");
				   //评论成功 刷新列表
				    commentList(1);
				    //
				}
			},
			error: function (err) {
				console.log(err);
			}
		})
	});

	//评论列表
	function commentList(pageNum){
	    $("#loading").show();
		$.ajax({
			 type : "POST", //提交方式
			 url : "/caseShareManage/commentList",//路径
			 data :{
				"caseShareId" : $("#likeCount2").attr("data-caseShareId"),
				 "pageSize" :3,
				 "pageNum" : pageNum
			 },
			 //数据，这里使用的是Json格式进行传输JSON.stringify(data),
			 dataType:"json",
			 //contentType: "application/x-www-form-urlencoded",
			 success: function (data) {
				if(data.code > 0){
					var list = data.pageInfo.list;
					console.info(data.pageInfo);
					if(list != null && list.length>0){
					    var html = "";
					    for(var i = 0;i<list.length;i++){
							html+='<div class="listItem">';
							html+=   '<p>';
							html+=		'<span class="userStyle">'+list[i].addUserName+'</span>';
							html+=		'<span class="itemtime">'+formatDateTime(list[i].createTime)+'  发布</span>';
							html+=	  '</p>';
							html+=	  '<p class="itemtext textMsg">'+list[i].comment+'</p>';
							html+='</div>';
						}
						if(pageNum == 1){
					    	$("#commentList").html(html);
						}else{
					        $("#commentList").append(html);
						}
                        $("#pageNum").val(parseInt(data.pageInfo.pageNum)+1);
                        if (data.pageInfo.pageNum>=data.pageInfo.pages) { //这里判断接口数据是否到底部
                            load = true;
                            bottomTextShow = true;
                            $("#bottomText").show().text("别...别...滑了，我也是有底线的！");
                            $("#loading").hide();
                        }else if(data.pageInfo.pageNum<data.pageInfo.pages) {
                            load = false;
							$("#loading").hide();
                        }
					}else{
						load=true;
						$("#bottomText").show().text("暂无评论，赶紧去评论吧！");
					    $("#loading").hide();
					}
				}
			},
			error: function (err) {
				console.log(err);
			}
		})
	}

	$("#comment").keyup(function(){
	    $(this).next().next().find("span").eq(0).text($(this).val().length+"/");
		$(this).next().next().find("span").eq(1).text(200-$(this).val().length);
	});

	//时间格式化
	function formatDateTime(inputTime) {
		var date = new Date(inputTime);
		var y = date.getFullYear();
		var m = date.getMonth() + 1;
		m = m < 10 ? ('0' + m) : m;
		var d = date.getDate();
		d = d < 10 ? ('0' + d) : d;
		var h = date.getHours();
		h = h < 10 ? ('0' + h) : h;
		var minute = date.getMinutes();
		var second = date.getSeconds();
		minute = minute < 10 ? ('0' + minute) : minute;
		second = second < 10 ? ('0' + second) : second;
		return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
	};

	</script>
</div>
	</body>
</html>
